import './index.less';

layui.define('laytpl', function (exports) {
  // 定义树形菜单
  var AuthTree = function (elem, data) {
    this.data = data;
    this.elem = $(elem);

    // 折叠点击事件
    this.elem.on('click', '.tree-icon-sub', function (e) {
      $(e.currentTarget).parent().toggleClass('opened');
    });
    // 勾选点击事件
    this.elem.on('click', '.tree-icon-checked', function (e) {
      var _elem = $(e.currentTarget);
      var _item = _elem.parent().parent();

      var checked = _elem.data('checked');
      if (!_elem.hasClass('checked')) {
        _item.find('[data-checked="' + checked + '"]').addClass('checked');
      } else {
        _item.find('[data-checked="' + checked + '"]').removeClass('checked');
      }
    });
  }
  /** 获取 权限树 附加属性 */
  AuthTree.prototype.getParam = function () {
    return this.param;
  }
  /** 设置 权限树 附加属性 */
  AuthTree.prototype.setParam = function (param) {
    this.param = param;
  }

  /** 查找 权限树下的节点(Jq对象) */
  AuthTree.prototype.find = function (elemEl) {
    return this.elem.find(elemEl);
  }
  /** 填充 整个权限树 */
  AuthTree.prototype.html = function (html) {
    this.elem.html(html);
  }
  /** 获取 节点指定选择的值 */
  AuthTree.prototype.checked = function (elem, checked) {
    return $(elem).find('[data-checked="' + checked + '"]').hasClass('checked');
  }
  /** 获取 权限树的最终选择结果 */
  AuthTree.prototype.getData = function () {
    var _this = this;
    var answer = [];

    // 遍历每个节点的选中结果
    _this.find('.tree-title').each(function () {
      var manage = _this.checked(this, 'manage');
      var view = _this.checked(this, 'view');

      // 两个权限最少要有一个被选中
      if (view || manage) {
        var temp = $(this).data();
        temp['manage'] = manage;
        temp['view'] = view;

        answer.push(temp);
      }
    });

    return answer;
  }
  /** 设置 权限树的结果,并渲染到页面 */
  AuthTree.prototype.setData = function (data) {
    var _this = this;
    var tpl = [];

    tpl.push('<div class="tree-list tree-root">');
    tpl.push('	{{# layui.each(d, function(i, a){ }}');
    tpl.push('	<div class="tree-item {{(a.childrens && a.childrens.length > 0)?\'tree-sub\':\'\'}}">');
    tpl.push('		<div class="tree-title" data-id="{{a.id}}" data-pid="{{a.pid}}" data-identity="{{a.identity}}">');
    tpl.push('			<i class="layui-icon tree-icon-sub"></i>');
    tpl.push('			<p class="tree-text">{{a.name}}</p>');
    tpl.push('			<i class="layui-icon tree-icon-checked {{a.manage?\'checked\':\'\'}}" data-checked="manage"></i>');
    tpl.push('			<i class="layui-icon tree-icon-checked {{a.view?\'checked\':\'\'}}" data-checked="view"></i>');
    tpl.push('		</div>');
    tpl.push('		{{# if(a.childrens && a.childrens.length > 0){ }}');
    tpl.push('		<div class="tree-list">');
    tpl.push('			{{# layui.each(a.childrens, function(j, b){ }} ');
    tpl.push('			<div class="tree-item {{(b.childrens && b.childrens.length > 0)?\'tree-sub\':\'\'}}">');
    tpl.push('				<div class="tree-title" data-id="{{b.id}}" data-pid="{{b.pid}}" data-identity="{{b.identity}}">');
    tpl.push('					<i class="layui-icon tree-icon-sub"></i>');
    tpl.push('					<p class="tree-text">{{b.name}}</p>');
    tpl.push('					<i class="layui-icon tree-icon-checked {{b.manage?\'checked\':\'\'}}" data-checked="manage"></i>');
    tpl.push('					<i class="layui-icon tree-icon-checked {{b.view?\'checked\':\'\'}}" data-checked="view"></i>');
    tpl.push('				</div>');
    tpl.push('      		{{# if(b.childrens && b.childrens.length > 0){ }}');
    tpl.push('      		<div class="tree-list">');
    tpl.push('      			{{# layui.each(b.childrens, function(j, c){ }} ');
    tpl.push('      			<div class="tree-item">');
    tpl.push('      				<div class="tree-title" data-id="{{c.id}}" data-pid="{{c.pid}}" data-identity="{{c.identity}}">');
    tpl.push('      					<i class="layui-icon tree-icon-sub"></i>');
    tpl.push('      					<p class="tree-text">{{c.name}}</p>');
    tpl.push('      					<i class="layui-icon tree-icon-checked {{c.manage?\'checked\':\'\'}}" data-checked="manage"></i>');
    tpl.push('      					<i class="layui-icon tree-icon-checked {{c.view?\'checked\':\'\'}}" data-checked="view"></i>');
    tpl.push('      				</div>');
    tpl.push('      			</div>');
    tpl.push('      			{{# }); }}');
    tpl.push('      		</div>');
    tpl.push('      		{{# } }}');
    tpl.push('			</div>');
    tpl.push('			{{# }); }}');
    tpl.push('		</div>');
    tpl.push('		{{# } }}');
    tpl.push('	</div>');
    tpl.push('	{{# }); }}');
    tpl.push('</div>');


    // 模版渲染到页面
    layui.laytpl(tpl.join('')).render(data, function (html) {
      _this.html(html);
    });
  }

  // 输出AuthTree接口
  exports('authtree', function (elem, data) {
    return new AuthTree(elem, data || []);
  });
});